<template>
	<div class="hongbao">
		<div class="header">
			<router-link to="">
				<img src="../assets/jtz.png" alt="">
			</router-link>
			<p id="hb">兑换红包</p>
		</div>
		<div class="dhm">
			<input type="text" placeholder="请输入兑换码" class="p1">
		</div>

		<div class="akl">
			<input type="text" placeholder="验证码" class="p2">
			<div class="you">
				<img src="../assets/elm.png" alt="" style="width: 6rem;height: 3rem;">
				<div class="p3" @click="yzm()">
					<p>看不清</p>
					<p style="color: #3b95e9;">换一张</p>
				</div>
			</div>
		</div>
		<div class="dh" @click="duihuan()">兑换</div>
		
		<div class="wuxiao">
			 <img src="../assets/huan.png" alt="" style="width: 5rem;margin-top: 1rem;">
			 <p style="padding:0.5rem;font-size: 1rem;">无效的兑换码</p>
			 <div class="que">确定</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"hongbao",
		data:function(){
			return{
				val:[],
				val1:[],
			}
		},
		methods:{
			
			yzm() {
				let obj = this;
				this.$axios({
					url: "https://elm.cangdu.org/v1/captchas",
					method: "post"
				}).then(function(res) {
					obj.datas = res.data.code,
					window.console.log(obj.datas)
				 window.console.log(res);
				})
			},
			duihuan(){
				
			}
		}
		
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.hongbao {
		overflow: hidden;
		width: 100%;
		background: rgba(0, 0, 0, 0.01);
	}

	.header {
		position: fixed;
		height: 3rem;
		background: #3190e8;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000000;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.header img {
		position: absolute;
		top: 0;
		left: 0;
		width: 2.6rem;
	}

	#hb {
		font-size: 1.3rem;
		color: white;
		font-weight: 570;
		margin: 0 auto;
	}

	.dhm {
		padding-top: 3rem;
		width: 100%;
	}

	.p1 {
		width: 90%;
		margin-left: 5%;
		margin-top: 1rem;
		border: .025rem solid #eee;
		outline: medium;
		border-radius: 3px;
		height: 3rem;
		text-indent: 0.5rem;
		font-size: 1.1rem;
	}

	.akl {
		display: flex;
		width: 90%;
		margin-left: 5%;
		margin-top: 1rem;
	}
    
	.p2 {
		width: 58%;
		border: .025rem solid #eee;
		outline: medium;
		border-radius: 3px;
		height: 3rem;
		text-indent: 0.5rem;
		font-size: 1.1rem;
	}

	.you {
		display: inline-block;
		display: flex;
		background: white;
		width: 44%;
		margin-left: 0.5rem;
	}

	.p3 {
		flex-wrap: wrap;
		font-size: 0.8rem;
		padding-left: 0.3rem;
		padding-top: 0.4rem;
	}
	.dh{
		background: #ccc;
		width: 80%;
		margin-left: 8%;
		text-align: center;
		padding: 0.5rem;
		color: white;
		margin-top: 1rem;
		border-radius: 0.4rem;
	}
	.wuxiao{
		background: white;
		width: 18rem;
		text-align: center;
		position: absolute;
		left: 12%;
		top:27%;
		border-radius: 0.7rem;
		/* display: none; */
	}
	.que{
		background: #4cd964;
		color: white;
		font-size: 1.3rem;
		padding: 0.5rem;
		border-radius: 0 0 0.7rem 0.7rem;
	}
</style>
